{% extends "base.html" %}
{% load static %}

{% block title %}
    生活方式
{% endblock %}

{% block content %}
    <!-- section main content -->
    <section class="main-content">
        <div class="container-xl">
            <div class="row gy-4">
                <div class="col-lg-8">
                    <div class="row gy-4">
                        {% for blog in all_blog %}
                            <div class="col-sm-6"><!-- post -->
                                <div class="post post-grid rounded bordered">
                                    <div class="thumb top-rounded">
                                        <a href="/life/list/" class="category-badge position-absolute">{{ blog.category }}</a>
                                        <span class="post-format"><i class="icon-picture"></i></span>
                                        <a href="/life/detail/{{ blog.id }}/"><!-- 博客详情 -->
                                            <div class="inner">
                                                <img src="{{ blog.fm_image }}" alt="post-title" class="img-fluid rounded cover-image"/>
                                            </div>

                                        </a>
                                    </div>
                                    <div class="details">
                                        <ul class="meta list-inline mb-0">
                                            <li class="list-inline-item"><a href="/user/person/"><!-- 用户详情 -->
                                                <img src="/media/{{ blog.user.user_head }}"
                                                     class="author circular-image" alt="author"/>{{ blog.user.name }}
                                            </a>
                                            </li>
                                            <li class="list-inline-item">{{ blog.create_time }}</li>
                                        </ul>
                                        <h5 class="post-title mb-3 mt-3"><a
                                                href="/life/detail/{{ blog.id }}/">{{ blog.title|slice:"10"}}</a>
                                        </h5>
                                        <p class="excerpt mb-0">{{ blog.desc |slice:"15"| safe }}...</p>
                                    </div>
                                    <div class="post-bottom clearfix d-flex align-items-center">
                                        <div class="social-share me-auto">
                                            <button class="toggle-button icon-share"></button>
                                            <ul class="icons list-unstyled list-inline mb-0">
                                                <li class="list-inline-item"><a href="#"><i
                                                        class="fab fa-facebook-f"></i></a></li>
                                                <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a>
                                                </li>
                                                <li class="list-inline-item"><a href="#"><i
                                                        class="fab fa-linkedin-in"></i></a></li>
                                                <li class="list-inline-item"><a href="#"><i
                                                        class="fab fa-pinterest"></i></a></li>
                                                <li class="list-inline-item"><a href="#"><i
                                                        class="fab fa-telegram-plane"></i></a></li>
                                                <li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="more-button float-end"><a href="blog-single.html"><span
                                                class="icon-options"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <!-- 上一页 -->
                        {% if all_blog.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ all_blog.previous_page_number }}&btype={{ btype }}" tabindex="-1">上一页</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                        {% endif %}

                        <!-- 页码列表 -->
                        {% for page_index in all_blog.paginator.page_range %}
                            {% if page_index >= all_blog.number|add:"-2" and page_index <= all_blog.number|add:"2" %}
                                <li class="page-item {% if page_index == all_blog.number %}active{% endif %}">
                                    <a class="page-link" href="?page={{ page_index }}&btype={{ btype }}">{{ page_index }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        <!-- 下一页 -->
                        {% if all_blog.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ all_blog.next_page_number }}&btype={{ btype }}">下一页</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                </div>
                <div class="col-lg-4"><!-- sidebar -->
                    <div class="sidebar"><!-- widget about -->
                        <div class="widget rounded">
                            <div class="widget-about data-bg-image text-center" data-bg-image="images/map-bg.png"><img
                                    src="{% static 'images/logo.svg' %}" alt="logo" class="mb-4"/>
                                <p class="mb-4">
                                    你好，我们是一群对内容、时尚、名人和生活方式充满热情的内容创作者。我们帮助客户将合适的内容带给合适的人。</p>
                                <ul class="social-icons list-unstyled list-inline mb-0">
                                    <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                                    <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
                                    <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
                                    <li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
                                    <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- widget popular posts -->
                        <div class="widget rounded">
                            <div class="widget-header text-center">
                                <h3 class="widget-title">热门文章</h3>
                                <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                            </div>
                            <div class="widget-content"><!-- post -->
                                {% for foo in all_blog_hot %}
                                	<div class="post post-list-sm circle">
                                    <div class="thumb circle"><span class="number">{{ forloop.counter }}</span>
                                        <a href="/life/detail/{{ foo.id }}">
                                            <div class="inner">
                                                <img src="/media/{{ foo.user.user_head }}" alt="post-title"/></div>
                                        </a>
                                    </div>
                                    <div class="details clearfix">
                                        <h6 class="post-title my-0">
                                            <a href="/life/detail/{{ foo.id }}">{{ foo.title }}</a>
                                        </h6>
                                        <ul class="meta list-inline mt-1 mb-0">
                                            <li class="list-inline-item">{{ foo.create_time }}</li>
                                        </ul>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <!-- widget categories -->
                        <div class="widget rounded">
                            <div class="widget-header text-center">
                                <h3 class="widget-title">探索话题</h3>
                                <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                            </div>
                            <div class="widget-content">
                                <ul class="list">
                                    {% for k,v in catogory_count.items %}
                                    	<li><a href="#">{{ k }}</a><span>{{ v }}</span></li>
                                    {% endfor %}    
                                </ul>
                            </div>
                        </div>
                        <!-- widget tags -->
                        <div class="widget rounded">
                            <div class="widget-header text-center">
                                <h3 class="widget-title">标签云</h3>
                                <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                            </div>
                            <div class="widget-content">
                                {% for foo in all_tag %}
                                    <a href="#" class="tag">#{{ foo.tag_name }}</a>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
<script>
    // 测试搜索功能是否正常工作
    $(document).ready(function() {
        console.log('Category页面加载完成');
        console.log('当前页面URL:', window.location.href);

        // 检查搜索元素是否存在
        var searchBtn = $('.search-btn');
        var searchInput = $('input[name="search_word"]');

        console.log('搜索按钮数量:', searchBtn.length);
        console.log('搜索输入框数量:', searchInput.length);

        if (searchBtn.length > 0) {
            console.log('搜索按钮存在，测试点击事件');
            // 测试点击事件
            searchBtn.on('click', function() {
                console.log('搜索按钮被点击（来自category页面的测试）');
            });
        }

        if (searchInput.length > 0) {
            console.log('搜索输入框存在，测试输入事件');
            // 测试输入事件
            searchInput.on('input', function() {
                console.log('搜索输入框输入:', $(this).val());
            });
        }
    });
</script>
{% endblock %}

{% block css %}
    <style>
        .circular-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
         .cover-image {
        width: 100%;
        height: 200px; /* 统一高度 */
        object-fit: cover; /* 图片自动裁剪填充容器 */
        border-radius: 10px;
        }
    </style>
{% endblock %}



